<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Game>
        <template v-slot:default="params">
          <ul>
            <li v-for="y in params.youxi">{{ y.name }}</li>
          </ul>
        </template>
      </Game>

      <!-- 有序列表 -->
      <Game>
        <template #default="params">
          <ol>
            <li v-for="item in params.youxi">{{ item.name }}</li>
          </ol>
        </template>
      </Game>

      <Game>
        <!-- params 是一个对象， 你用的时候可以直接解构出来{ youxi } -->
        <template #default="{ youxi }">
          <h4 v-for="item in youxi">{{ item.name }}</h4>
        </template>
      </Game>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Game from './Game.vue';
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }

  .content {
    display: flex;
    justify-content: space-evenly;
  }

  img,
  video {
    width: 100%;
  }

  h4 {
    margin-left: 20px;
  }
</style>
